<script setup lang="ts" id="men">
import { reactive, watch } from "vue";
import router from "../router";
import { useTabBar } from "../store/usetabBar";
const useTabBarStore = useTabBar();
const state = reactive({
  collapsed: false,
  selectedKeys: ["1"],
  openKeys: ["sub1"],
  preOpenKeys: ["sub1"],
});
const list = [
  {
    name: "展示营销",
    children: [
      {
        name: "动态分类",
        path: "/dynamic-category",
        id: "2",
      },
      { id: "3", path: "/dynamicList", name: "动态列表" },
      { id: "4", path: "/about-school", name: "关于学校" },
      { id: "22", path: "intended-studentsMain", name: "意向学员主页面" },
      {
        id: "5",
        name: "意向学员",
        children: [
          { name: "意向学员删除记录", path: "/intended-students", id: "17" },
          { name: "意向学员添加", path: "/intended-addstudents", id: "18" },
          { name: "试听列表", path: "/audition-list", id: "19" },
          {
            name: "意向学员详情-线索记录",
            path: "/intended-studentsClues",
            id: "19",
          },
          {
            name: "意向学员详情-试听记录",
            path: "/intended-studentAuditions",
            id: "20",
          },
          { name: "学员线索列表", path: "/student-clue-list", id: "21" },
        ],
      },
    ],
  },
  {
    name: "教务教学",
    children: [
      { id: "9", name: "二级路由2-1" },
      {
        id: "10",
        name: "二级路由2-2",
        children: [
          { name: "三级路由2-2-1", children: [{ name: "哈哈" }] },
          { name: "三级路由2-2-2" },
        ],
      },
    ],
  },
  {
    name: "财务中心",
    children: [
      { id: "11", name: "二级路由2-1" },
      {
        id: "12",
        name: "二级路由2-2",
        children: [
          { name: "三级路由2-2-1", children: [{ name: "嘻嘻" }] },
          { name: "三级路由2-2-2" },
        ],
      },
    ],
  },
  {
    name: "统计对比",
    children: [
      { id: "13", name: "二级路由2-1" },
      {
        id: "14",
        name: "二级路由2-2",
        children: [{ name: "三级路由2-2-1" }, { name: "三级路由2-2-2" }],
      },
    ],
  },
  {
    name: "系统设置",
    children: [
      { id: "15", name: "二级路由2-1" },
      {
        id: "16",
        name: "二级路由2-2",
        children: [{ name: "三级路由2-2-1" }, { name: "三级路由2-2-2" }],
      },
    ],
  },
];

watch(
  () => state.openKeys,
  (_val, oldVal) => {
    state.preOpenKeys = oldVal;
  }
);
const goRouter = (path: string, name: string): void => {
  if (path.trim() === "" || path === undefined) return;
  router.push(path);
  useTabBarStore.settingName(name);
};
</script>

<template>
  <div style="width: 256px">
    <div class="top">
      <span class="icon"></span>
      <span class="text">五彩艺术学校</span>
    </div>
    <!-- <div style="height: 145px"></div> -->
    <a-menu
      v-model:openKeys="state.openKeys"
      v-model:selectedKeys="state.selectedKeys"
      mode="inline"
      theme="dark"
      :inline-collapsed="state.collapsed"
    >
      <!-- 首页 -->
      <a-menu-item key="1" @click="goRouter('/', '首页')">
        <template #icon>
          <PieChartOutlined />
        </template>
        <span>首页</span>
      </a-menu-item>
      <!-- 首页 -->
      <a-sub-menu :key="index" v-for="(item, index) in list">
        <!-- 教务系统 -->
        <template #title>{{ item.name }}</template>
        <block v-for="(children1Item, index2) in item.children">
          <a-menu-item
            :key="children1Item.id"
            v-if="!children1Item.children"
            @click="
              goRouter((children1Item as any).path, (children1Item as any).name)
            "
            >{{ children1Item.name }}
          </a-menu-item>
          <!-- 二级路由 -->
          <a-sub-menu
            :key="'sub3' + children1Item.name"
            :title="children1Item.name"
            v-if="children1Item.children"
          >
            <a-menu-item
              :key="'sub4' + children2Item.name"
              v-for="(children2Item, index3) in children1Item.children"
              @click="
                goRouter(
                  (children2Item as any).path,
                  (children2Item as any).name
                )
              "
            >
              {{ (children2Item as any).name }}
            </a-menu-item>

            <!-- <a-sub-menu key="sub3" title="四级">
              <a-menu-item key="11">Option 11</a-menu-item>
            </a-sub-menu> -->
          </a-sub-menu>
        </block>

        <!-- <a-sub-menu key="sub2" title="Submenu">
          <a-menu-item key="11">Option 11</a-menu-item>
          <a-menu-item key="12">Option 12</a-menu-item>
          <a-sub-menu key="sub3" title="Submenu33333">
            <a-menu-item key="11">Option 11</a-menu-item>
            <a-menu-item key="12">Option 12</a-menu-item>
          </a-sub-menu>
        </a-sub-menu> -->
      </a-sub-menu>
    </a-menu>
  </div>
</template>

<style scoped lang="scss">
.top {
  display: flex;
  width: 256px;
  z-index: 99;
  height: 140px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #34365a;

  .icon {
    width: 30px;
    height: 44px;
    border: 5px #ffffff solid;
  }

  .text {
    color: #ffffff;
    margin-top: 10px;
  }
}
</style>
